<template>
<div>

<div class="i-layout-page-header">
  <PageHeader class="product_tabs" :title="$route.meta.title" hidden-breadcrumb></PageHeader>
</div>

<Card :bordered="false" dis-hover class="ivu-mt">
    <Form ref="searchcForm" :model="searchForm"  :label-width="labelWidth" :label-position="labelPosition" @submit.native.prevent>
        <Row type="flex" :gutter="24">
            <Col>
                <FormItem label="公告标题:"  label-for="task_title">
                    <Input search enter-button placeholder="请输入公告标题" v-model="searchForm.title" @on-search="getList"/>
                </FormItem>
            </Col>
        </Row>
    </Form>

    <Row type="flex">
        <Col>
        <Button type="primary" class="bnt" icon="md-add" @click="add">发布公告</Button>
        </Col>
    </Row>

    <Table :columns="columns" :data="List" ref="table" class="mt20"
            :loading="loading" highlight-row
            no-userFrom-text="暂无数据"
            no-filtered-userFrom-text="暂无筛选结果">
        <template slot-scope="{ row, index }" slot="content">
            <span v-html="row.content"></span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
            <template>
                <a @click="edit(row)">编辑</a>
                <Divider type="vertical" />
                <a @click="handleDel(row.id)">删除</a>
            </template>
        </template>
    </Table>
    <div class="acea-row row-right page">
        <Page :total="total" :current="searchForm.page" @on-change="pageChange"
              :page-size="searchForm.limit"/>
    </div>
</Card>

<Modal
    v-model="modals"
    title="通知公告"
    class="paymentFooter"
    scrollable
    width="960"
    @on-ok="handleSubmit"
>
    <Form ref="formValidate" :model="noticeData" :label-width="100">
        <FormItem label="公告标题">
            <Input v-model="noticeData.title" placeholder="请输入公告标题" />
        </FormItem>
        <FormItem label="公告内容">
            <vue-ueditor-wrap v-model="noticeData.content" :config="myConfig"></vue-ueditor-wrap>
        </FormItem>
        <FormItem label="发布时间">
            <DatePicker type="date" v-model="noticeData.publish_time" placeholder="设置发布时间" @on-change="changeDate"></DatePicker>
        </FormItem>
    </Form>
</Modal>

</div>
</template>

<script>
    import { mapState } from 'vuex';
    import VueUeditorWrap from 'vue-ueditor-wrap';
    import { getNoticeList, store, update, del } from '@/api/notice';

  export default {
    name: 'HomeNotice',
    components: {
        VueUeditorWrap
    },
    data () {
      return {
        searchForm: {
          page: 1,
          limit: 20,
          title: ''
        },
        List: [],
        total: 0,
        loading: false,
        columns: [
          {
            title: 'ID',
            key: 'id',
            minWidth: 90
          },
          {
            title: '标题',
            key: 'title',
            minWidth: 200
          },
          {
            title: '内容',
            slot: 'content',
            minWidth: 500
          },
          {
            title: '发布时间',
            key: 'publish_time',
            minWidth: 150
          },
          {
            title: '操作',
            slot: 'action',
            fixed: 'right',
            minWidth: 150
          }
        ],

        noticeData: {
            title: '标题标题',
            content: '内容内容',
            publish_time: '2020-10-20',
        },

        modals: false,
        myConfig: {
            autoHeightEnabled: false, // 编辑器不自动被内容撑高
            initialFrameHeight: 300, // 初始容器高度
            initialFrameWidth: '100%', // 初始容器宽度
            UEDITOR_HOME_URL: '/admin/UEditor/',
            serverUrl: '',
            toolbars: [[
                'fontsize', //字号
                'forecolor', //字体颜色
                'bold', //加粗
                'justifyleft', //居左对齐
                'justifycenter', //居中对齐
                'insertorderedlist', //有序列表
                'insertunorderedlist', //无序列表
                'undo', //撤销
                'redo', //前进
            ]],
        },
        editId: 0, // 编辑公告的ID

      }
    },
    computed: {
      ...mapState('admin/layout', [
        'isMobile'
      ]),
      labelWidth () {
        return this.isMobile ? undefined : 70;
      },
      labelPosition () {
        return this.isMobile ? 'top' : 'right';
      }
    },
    mounted () {
      this.getList();
    },
    methods: {
        // 获取列表
        getList () {
            this.loading = true;
            getNoticeList(this.searchForm).then(async res => {
                if (res.status === 200) {
                    this.List = res.data.list;
                    this.total = res.data.count;
                    this.loading = false;
                } else {
                    this.loading = false;
                    this.$Message.error(res.msg);
                }
            }).catch(res => {
                this.loading = false;
                this.$Message.error(res.msg);
            })
        },
        // 添加公告弹窗
        add() {
            this.noticeData = {
                title: '',
                content: '',
                publish_time: '',
            },
            this.editId = 0
            this.modals = true
        },
        // 编辑公告弹窗
        edit(row) {
            this.noticeData.title = row.title
            this.noticeData.content = row.content
            this.noticeData.publish_time = row.publish_time
            this.editId = row.id
            this.modals = true
        },
        // 提交公告
        handleSubmit() {
            if(this.editId === 0) { // 发布
              this.handleAdd()
            } else { // 修改
              this.handleEdit()
            }
        },
        handleAdd() {
            store(this.noticeData).then(async res => {
                if (res.status === 200) {
                    this.$Message.success('发布成功');
                    this.getList()
                } else {
                    this.$Message.error(res.msg);
                }
            }).catch(res => {
                this.$Message.error(res.msg);
            })
        },
        handleEdit() {
            update(this.editId, this.noticeData).then(async res => {
                if (res.status === 200) {
                    this.$Message.success('修改成功');
                    this.getList()
                } else {
                    this.$Message.error(res.msg);
                }
            }).catch(res => {
                this.$Message.error(res.msg);
            })
        },
        // 修改公告时间
        changeDate(val) {
            this.noticeData.publish_time = val
        },


      // 分页
      pageChange (index) {
        this.searchForm.page = index;
        this.getList();
      },
      // 获得日期
      handleChange (date) {
        this.searchForm.start_time = date[0];
        this.searchForm.end_time = date[1];
      },


      // 删除
      handleDel (id) {
        this.$Modal.confirm({
          title: '确认要删除此条公告信息吗',
          onOk: () => {
            this.loading = true
            del(id).then(async res => {
                if (res.status === 200) {
                  this.$Message.success('删除成功');
                  this.getList();
                  this.loading = false
                } else {
                  this.loading = false
                    this.$Notice.error( {title: res.msg} )
                }
            }).catch(res => {
                this.loading = false
                this.$Notice.error( {title: res.msg} )
            })
          },
        });
      },


    },

  }
</script>

<style scoped lang="stylus">
    .treeSel >>>.ivu-select-dropdown-list
        padding 0 10px!important
        box-sizing border-box

    .tabBox_img
        width 36px
        height 36px
        border-radius:4px
        cursor pointer
        img
            width 100%
            height 100%
    .ivu-modal-wrap >>>.ivu-modal
         width:42% !important
    .search
        display:flex
    .red
        color:red
    .ivu-input-wrapper
        width: 100%!important;

</style>
